<template>
	<pageStyle1>
		<template #headerLeft>
			预约记录
		</template>
		<template #headerRight>
			<router-link to="/AboutView">
				<el-button round class="round">&lt; 返回</el-button></router-link>
		</template>
		<template #main>
			<div class="container">
				<div>

					<el-header class="head-top">
						<div>
							<img :src="head.photo" style="width: 100px; height: 100px" />
						</div>
						<div class="right">
							<p> <span class="tetx">课程名称:</span>{{ head.name }}</p>
							<p><span class="tetx">时间: </span>{{ head.dateRange }}  <span class="tetx"> 教练: </span>{{ head.coachName }}</p>
							<p><span class="tetx">以预约:</span>{{ head.numAppointment }} <span class="tetx">以签到:</span>{{  }} <span class="tetx">已取消:</span> <span class="tetx">候补中:</span></p>
							<p style="margin-top: 10px;">
								<!-- <el-button class="operation" type="success"
									@click="centerDialogVisible = true">编辑</el-button>
								<el-button class="operation" type="info">删除课时</el-button> -->
							</p>
						</div>

					</el-header>
					<!-- <el-header class="head">
			预约记录
        </el-header> -->
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column prop="name" label="姓名" width="150" />
						<el-table-column prop="phone" label="电话" width="200" />
						<el-table-column prop="bookingNum" label="人数" width="100" />
						<el-table-column prop="createTime" label="上课时间" width="200" />
						<el-table-column prop="vipName" label="会员卡" width="200" />
						<el-table-column prop="remark" label="会员备注" width="200" />
						<el-table-column prop="status" label="状态" width="150">
							<template #default="s">
								<el-tag type="danger" v-if="s.row.status == 0">未签到</el-tag>
								<el-tag type="success" v-else>已签到</el-tag>
							</template>
						</el-table-column>

						<el-table-column prop="startTime" label="预约时间" width="150" />
						<el-table-column prop="id" label="操作" width="300">
							<template #default="sl">
								<el-button class="operation"  :data-id="sl.row.id" @click="UserCheckIn($event)" type="primary" :disabled="sl.row.status == '1'?true:false">签到</el-button>
								<el-button class="operation" @click="Cancel($event)" :data-id="sl.row.id" type="primary">取消预约</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				
			</div>
		</template>
	</pageStyle1>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { ref } from "vue";
import pageStyle1 from "../components/pageStyle1.vue";
import Group from "../store/GroupStore";
import { GroupHooks, Groups } from "../hooks/GroupHooks";

const route = useRoute()
const bookId=route.query.scheduleId//获取编辑页传过来的参数compile公用编辑页
const _GroupHooks: Groups = GroupHooks()
_GroupHooks.GroupAll(bookId,getGroupAll)

const tableData = ref<Array<any>>([])
function getGroupAll(data:any){ //处理异步列表数据
tableData.value = data

}

const UserCheckIn = (e:any) => {//签到用户
  let id = e.currentTarget.dataset.id;
  _GroupHooks.UserCheckIn(id,getGroupAll,bookId);
};
const Cancel = (e:any) => {//取消预约
  let id = e.currentTarget.dataset.id;
  _GroupHooks.Cancel(id,getGroupAll,bookId);
};

//获取主页面传过来的课程信息
const scheduleId=route.query.scheduleId//获取编辑页传过来的参数compile公用编辑页
const head=ref<Array<any>>([])
	_GroupHooks.getScheduleId(scheduleId,Schedule)
function Schedule(data:any){
 head.value=data;
 console.log(head.value)
}
</script>
<style type="text/css" scoped>
>>>th div {
	text-align: center;
}

>>>td div {
	text-align: center;
}

.head {
	/* height: 50px; */
	background-color: rgb(228, 228, 228);
	display: flex;
	align-items: center;

}

.head-top {
	height: 150px;
	border-radius: 10px;
	display: flex;
	padding: 15px;
}

.right {
	display: flex;
	flex-direction: column;
	margin-left: 20px;
}

.right p:nth-child(1) {
	margin-bottom: 15px;
	font-size: 20px;
}
.tetx{
	font-size: 17px;
	font-weight: 800;
	margin: 0 10px 0 0;
}

.return {
	display: flex;
	justify-content: flex-end;
}

.operation {
	margin-right: 5px;
}

::v-deep .el-dialog__header {
	background-color: #2f3e4d;
	margin: 0;
}

::v-deep .el-dialog__title {
	color: #fff;
}

.el-select {
	width: 300px;
	height: 40px;
}

>>>.el-form-item__label {
	width: 100px;
}

.add {
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>